<template>
  <div>
    <a-card title="生产计划">
      <a-row :gutter="[12, 8]">
        <a-col :span="24" style="width: 256px;">
          <a-range-picker @change="onChangePicker" />
        </a-col>
        <a-col :span="24" style="width: 200px;">
          <a-input v-model="searchForm.search" placeholder="生产单号, 销售单号" allowClear @pressEnter="search" />
        </a-col>
        <a-col :span="24" style="width: 84px;">
          <a-button type="primary" icon="search" @click="search">查询</a-button>
        </a-col>

        <div style="margin-bottom: 12px; float: right">
          <a-button type="primary" icon="plus" style="margin: 0 8px" @click="openCreateModal({})">
            新增生产计划
          </a-button>
        </div>
      </a-row>

      <a-row style="margin-top: 12px">
        <a-table rowKey="id" :columns="columns" :data-source="items" :pagination="pagination" :loading="loading" :scroll="{x: 1400}">
          <div slot="action" slot-scope="value, item, index">
            <a-button-group size="small">
              <a-button v-if="item.status == 'in_plan'" @click="openCreateModal(item)">编辑</a-button>
              <a-button @click="detial(item)">详情</a-button>
              <a-button v-if="item.status == 'in_plan'" @click="goPickingOrder(item)">领料单</a-button>
              <a-button v-if="item.status == 'in_plan'" type="primary" @click="issue(item)">发布工单</a-button>
              <a-popconfirm v-if="item.status == 'in_progress'" title="确定完成入库吗?">
                <a-button>完成入库</a-button>
              </a-popconfirm>
              <a-popconfirm v-if="item.status == 'in_progress'" title="确定关闭吗?" @confirm="close(item)">
                <a-button type="primary">关闭工单</a-button>
              </a-popconfirm>
              <a-popconfirm v-if="item.status == 'in_plan'" title="确定删除吗?" @confirm="destroy(item)">
                <a-button type="danger">删除</a-button>
              </a-popconfirm>
            </a-button-group>
          </div>
        </a-table>
      </a-row>
    </a-card>

    <form-modal v-model="visible" :form="targetItem" @create="create" @update="update" />

    <a-modal v-model="issueVisible" title="发布工单" :width="720" okText="发布">
      <a-table :columns="issueColumns" :data-source="issueItem.process_items" :pagination="false">
        <template slot="start_time" slot-scope="value">
          <a-date-picker :showTime="true" />
        </template>
        <template slot="end_time" slot-scope="value">
          <a-date-picker :showTime="true" />
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
// import {
//   productionOrderList,
//   productionOrderDelete,
//   productionOrderIssue,
//   productionOrderClose,
// } from "@/api/production";

export default {
  components: {
    FormModal: () => import("./FormModal.vue"),
  },
  data() {
    return {
      searchForm: { search: "", page: 1, ordering: undefined },
      pagination: { current: 1, total: 0, pageSize: 16 },
      loading: false,
      items: [],
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 60,
          fixed: "left",
          customRender: (value, item, index) => {
            return index + 1;
          },
        },
        {
          title: "工单单号",
          dataIndex: "number",
          fixed: "left",
          width: 180,
        },
        {
          title: "状态",
          dataIndex: "status_display",
          width: 100,
        },
        {
          title: "物料编号",
          dataIndex: "material_number",
        },
        {
          title: "物料名称",
          dataIndex: "material_name",
        },
        {
          title: "计划数量",
          dataIndex: "total_quantity",
          width: 100,
        },
        {
          title: "完成数量",
          dataIndex: "completed_quantity",
          width: 100,
        },
        {
          title: "开始日期",
          dataIndex: "start_date",
        },
        {
          title: "完成日期",
          dataIndex: "completed_date",
        },
        {
          title: "操作",
          dataIndex: "action",
          width: 360,
          fixed: "right",
         scopedSlots: { customRender: "action" },
        },
      ],
      visible: false,
      targetItem: {},

      issueVisible: false,
      issueItem: {},
      issueColumns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 60,
          fixed: "left",
          customRender: (value, item, index) => {
            return index + 1;
          },
        },
        {
          title: "工序",
          dataIndex: "name",
        },
        {
          title: "计划开始时间",
          dataIndex: "start_time",
          scopedSlots: { customRender: "start_time" },
        },
        {
          title: "计划结束时间",
          dataIndex: "end_time",
          scopedSlots: { customRender: "end_time" },
        },
      ],
    };
  },
  methods: {
    initialize() {
      this.items = [
        {
          id: 1,
          number: "p2022061000001",
          status: "in_plan",
          status_display: "计划中",
          material_number: "P001",
          material_name: "轴承",
          total_quantity: 100,
          quantity_produced: 10,
          completed_quantity: 0,
          start_time: "2022-06-12 00:00:00",
          end_time: "2022-06-12 00:00:00",
          start_date: "2022-06-30",
          completed_date: "",
          process_items: [
            { id: 1, number: "P001", name: "退火" },
            { id: 2, number: "P002", name: "车加工" },
            { id: 3, number: "P003", name: "热处理" },
            { id: 4, number: "P004", name: "磨加工" },
            { id: 5, number: "P005", name: "抛光" },
            { id: 6, number: "P006", name: "防锈" },
          ],
        },
        {
          id: 2,
          number: "p2022061000002",
          status: "in_progress",
          status_display: "生产中",
          material_number: "P002",
          material_name: "轴承",
          total_quantity: 100,
          quantity_produced: 10,
          completed_quantity: 20,
          start_time: "2022-06-12 00:00:00",
          end_time: "2022-06-12 00:00:00",
          start_date: "2022-06-12",
          completed_date: "2022-06-20",
        },
      ];
      // this.list();
    },
    list() {
      // this.loading = true;
      // productionOrderList(this.searchForm)
      //   .then((data) => {
      //     this.pagination.total = data.count;
      //     this.items = data.results;
      //   })
      //   .finally(() => {
      //     this.loading = false;
      //   });
    },
    create(item) {
      this.items = this.$functions.insertItem(this.items, item);
    },
    update(item) {
      this.items = this.$functions.replaceItem(this.items, item);
    },
    destroy(item) {
      // productionOrderDelete({ id: item.id }).then(() => {
      //   this.$message.success("删除成功");
      //   this.items = this.$functions.removeItem(this.items, item);
      // });
    },
    issue(item) {
      this.issueVisible = true;
      this.issueItem = { ...item };
      // productionOrderIssue({ id: item.id }).then((data) => {
      //   this.$message.success("发布成功");
      //   this.items = this.$functions.replaceItem(this.items, data);
      // });
    },
    close(item) {
      // productionOrderClose({ id: item.id }).then((data) => {
      //   this.$message.success("关闭成功");
      //   this.items = this.$functions.replaceItem(this.items, data);
      // });
    },
    detial(item) {
      this.$router.push({ path: "/production/detial", query: { id: item.id } });
    },
    goPickingOrder(item) {
      this.$router.push({ path: "/production/picking_order", query: { id: item.id } });
    },
    search() {
      // this.searchForm.page = 1;
      // this.pagination.current = 1;
      // this.list();
    },
    tableChange(pagination, filters, sorter) {
      // this.searchForm.page = pagination.current;
      // this.pagination.current = pagination.current;
      // this.searchForm.ordering = `${sorter.order == "descend" ? "-" : ""}${sorter.field}`;
      // this.list();
    },
    onChangePicker(date, dateString) {
      // let startDate = date[0];
      // let endDate = date[1];
      // this.searchForm.start_date = startDate ? startDate.format("YYYY-MM-DD") : undefined;
      // this.searchForm.end_date = endDate ? endDate.add(1, "days").format("YYYY-MM-DD") : undefined;
      // this.search();
    },
    openCreateModal(item) {
      this.targetItem = { ...item };
      this.visible = true;
    },
  },
  mounted() {
    this.initialize();
  },
};
</script>

<style scoped></style>
